<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<title>配置系统</title>
	<jsp:include page="common/common_head.jsp"></jsp:include>

	<link rel="stylesheet" href="../codemirror-4.10/lib/codemirror.css">
	<script src="../codemirror-4.10/lib/codemirror.js"></script>
	<script src="../codemirror-4.10/mode/sql/sql.js"></script>

	<link rel="stylesheet" href="../codemirror-4.10/addon/hint/show-hint.css" />
	<script src="../codemirror-4.10/addon/hint/show-hint.js"></script>
	<script src="../codemirror-4.10/addon/hint/sql-hint.js"></script>
	<style type="text/css">
		body {line-height: 1}
		th {text-decoration: "auto"}
	</style>
</head>
<body  data-spy="scroll" data-target=".navbar">



<jsp:include page="common/common_banner_app.jsp"></jsp:include>
<div style="height:30px"></div>
<div class="container">

	<div class="row">
		<div class="span8">
			<div  class="control-group" style="margin-bottom:-5px;">

				<form action="/conf/list.html">


					<div class="input-prepend ">
						<span class="add-on">路径:</span>
						<input type="text" placeholder="路径" value = "${path}" name="path" >
						<button class="btn" type="submit">查看</button>
					</div>
				</form>

			</div>
		</div>
		<div class="span4">
			<div  class="control-group" style="margin-bottom:-5px;">

				<form action="/conf/addPath.html">
					<div class="input-prepend ">
						<span class="add-on">名称</span>
						<input type="text" name="name" placeholder="节点名称" >
						<input type="hidden" name="path" value = "${path}">
						<button class="btn" type="submit">添加节点</button>
					</div>
				</form>

			</div>
		</div>
	</div>

    <c:if test="${conf_host_list eq 'true'}">
    <a class="btn btn-primary" href="/conf/addHost.html?path=${path}&hosts=${hosts}">添加服务器</a>
    </c:if>
    <c:if test="${zookeeper eq 'missing' }">
    <a href="/app/appIndex.html">配置管理系统无法开启</a> 如果已经安装了zookeeper,请点击这里:<a href="/conf/enable.html">开启</a>
    </c:if>
    <div style="height:30px"></div>

	<table class="table  table-striped table-bordered table-hover " id = "showTable">

		<thead>
			<tr>
				<th>序号</th>
				<th>节点</th>
				<th>创建时间</th>
				<th>操作</th>

			</tr>
		</thead>
		<tbody>
		<c:forEach items="${list}" var="c" varStatus="v">
			<tr>
				<td>${v.index + 1}</td>
				<td><a href="/conf/list.html?path=${c[1]}">${c[0]}</a></td>
				<td>${c[3]}</td>
				<td>
					<a class="btn btn-primary" href="/conf/detail.html?path=${c[1]}">源码</a>
					<a class="btn btn-primary" href="/conf/showFinal.html?path=${c[1]}">预览</a>
					<a class="btn btn-primary" href="/conf/versionList.html?path=${c[1]}">版本</a>
                    <c:if test="${path eq '/'}">
                        <a class="btn btn-primary" href="/conf/list.html?path=/_status/application/${c[0]}&conf_host_list=true">查看节点列表</a>
                    </c:if>



					<a class="btn btn-danger" data-toggle="modal" data-target="#modal-${v.index}" >删除</a>
                    <div id="modal-${v.index}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h3 id="myModalLabel">删除确认!</h3>
                        </div>
                        <div class="modal-body">
                            <p>确认删除"${c[1]}"吗?</p>
                        </div>
                        <div class="modal-footer">
                            <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
                            <a class="btn btn-danger" href="/conf/delete.html?path=${c[1]}&parent=${path}">删除</a>
                        </div>
                    </div>
				</td>
			</tr>
		</c:forEach>

		</tbody>

	</table>



	<jsp:include page="common/common_js.jsp"></jsp:include>


    <!-- Modal -->


	<script>



		var editor = null

		$(document).ready(function(){
			editor = CodeMirror.fromTextArea(document.getElementById("sql"), {
				mode: "text/x-mysql",
				indentWithTabs: true,
				smartIndent: true,
				lineNumbers: true,
				matchBrackets : true,
				autofocus: true,
				extraKeys: {"Ctrl-.": "autocomplete", "Ctrl-Enter": function(){search()}},
				hintOptions: {tables: {
					users: {name: null, score: null, birthDate: null},
					countries: {name: null, population: null, size: null}
				}}
			});

		})

		function search(){

			$("#submitBtn").addClass("disabled").val("查询中...")


			$.ajax({
				url: "common/sql.html",
				type: "POST",
				data: {sql: editor.doc.getValue()},
				dataType: "json",
				success: function(r){

					var head = $("#showTable thead")

					head.empty()
					var headArr = []
					headArr.push("<tr><th>序号</th>")
					$.each(r.head,function(i,n){

						headArr.push("<th>" + n +"</th>")

					})
					headArr.push("</tr>")

					head.append(headArr.join(""))


					var data = $("#showTable tbody")

					data.empty()
					var dataArr = []
					$.each(r.dataList,function(i,n){


						dataArr.push("<tr>")


						dataArr.push("<td>" + (i + 1) + "</td>")
						$.each(n, function(x,y){

							dataArr.push("<td>" + y + "</td>")
						});
						dataArr.push("</tr>")

					})

					data.append(dataArr.join(""))

				},
				complete: function(){
					$("#submitBtn").removeClass("disabled").val("查询")

				}
			})
		}
	</script>
</body>
</html>